<template>
	<view class="task-con" :style="{ minHeight: heightVal - 2 + 'px' }">
		<custom-nav-bar title="我的设备" :navHeight="statusHeight" :showBack="false" />
		<view class="white-block" v-if="detailData.device_id">
			<u-row>
				<u-col span="4">
					<view class="title">
						安全帽
						<span v-if="false" @click="showTips" class="redTxt">余额不足</span>
					</view>
				</u-col>
				<u-col span="8">
					<view></view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>编号</view>
				</u-col>
				<u-col span="8">
					<view class="tl-right">{{ detailData.device_id }}</view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>GPS定位</view>
				</u-col>
				<u-col span="8">
					<view class="tl-right">{{ detailData.gps_flag == 1 ? '开启' : '关闭' }}</view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>更新时间</view>
				</u-col>
				<u-col span="8">
					<view class="tl-right">{{ detailData.updatetime ? detailData.updatetime.replace(/T/g, ' ') : '' }}</view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>电量</view>
				</u-col>
				<u-col span="8">
					<view class="tl-right" v-if="detailData.device_power > 60">
						<text style="color: orange">{{ detailData.device_power ? detailData.device_power + '%' : '暂无数据' }}</text>
					</view>
					<view class="tl-right" v-else>
						<text style="color: red">{{ detailData.device_power ? detailData.device_power + '%' : '暂无数据' }}</text>
					</view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>预警</view>
				</u-col>
				<u-col span="8">
					<view v-if="detailData.warn_flag == 1" class="tl-right" style="color: orange">有预警</view>
					<view v-else class="tl-right">无预警</view>
				</u-col>
			</u-row>
		</view>
		<view class="white-block" v-if="detailData.cn1">
			<u-row>
				<u-col span="4">
					<view class="title">
						摄像头
						<span v-if="false" @click="showTips" class="redTxt">余额不足</span>
					</view>
				</u-col>
				<u-col span="8">
					<view class="tl-right" v-if="detailData.camera_state == 0">离线</view>
					<view class="tl-right" v-else style="color: green">在线</view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>编号</view>
				</u-col>
				<u-col span="8">
					<view class="tl-right">{{ detailData.cn1 }}</view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>物联网卡</view>
				</u-col>
				<u-col span="8">
					<view class="tl-right">{{ detailData.SIM_cid }}</view>
				</u-col>
			</u-row>
			<u-row class="mt-10 btline">
				<u-col span="6">
					<view v-if="detailData.camera_station" class="cplan">{{ detailData.camera_station }}</view>
					<view v-else class="cplan">暂无数据</view>
				</u-col>
				<u-col span="6">
					<view class="btnBox" style="display: flex; justify-content: space-between; width: 100%">
						<u-button type="primary" class="leftbtn" size="mini" @click="toDetail(0)">查看</u-button>
						<u-button type="primary" class="rightbtn" size="mini" @click="backShow(0)">断点续传</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="white-block" v-if="detailData.id_recorder">
			<u-row>
				<u-col span="4">
					<view class="title">
						巡检仪
						<span class="redTxt" v-if="false" @click="showTips">余额不足</span>
					</view>
				</u-col>
				<u-col span="8">
					<view v-if="detailData.record_state" class="tl-right" style="color: green">在线</view>
					<view v-else class="tl-right">离线</view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>编号</view>
				</u-col>
				<u-col span="8">
					<view class="tl-right">{{ detailData.cn2 }}</view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>GPS定位</view>
				</u-col>
				<u-col span="8">
					<view v-if="detailData.hc2calat" class="tl-right">开启</view>
					<view v-else class="tl-right">关闭</view>
				</u-col>
			</u-row>
			<u-row class="mt-10">
				<u-col span="4">
					<view>更新时间</view>
				</u-col>
				<u-col span="8">
					<view class="tl-right">{{ detailData.racord_update ? detailData.racord_update.replace(/T/g, ' ') : '' }}</view>
				</u-col>
			</u-row>
			<u-row class="mt-10 btline">
				<u-col span="6">
					<view class="cplan" v-if="detailData.racord_station">{{ detailData.racord_station }}</view>
					<view class="cplan" v-else>暂无数据</view>
				</u-col>
				<u-col span="6">
					<view class="btnBox" style="display: flex; justify-content: space-between; width: 100%">
						<u-button type="primary" class="leftbtn" size="mini" @click="toDetail(1)">查看</u-button>
						<u-button type="primary" class="rightbtn" size="mini" @click="backShow(1)">断点续传</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { getDeviceDetails, getBreakCon } from '../../api/device/index.js';
import { formatTime } from '../../utils/date.js';
export default {
	data() {
		return {
			heightVal: undefined,

			detailData: {
				device_id: '暂无数据', //安全帽编号
				gps_flag: '暂无数据', //安全帽GPS状态
				updatetime: '暂无数据', //安全帽更新时间
				device_power: '', //安全帽电量
				cameraId: '暂无数据', // 摄像头编号
				cn1: '暂无数据', //摄像头编号
				camera_state: '暂无数据', //摄像头状态
				SIM_cid: '暂无数据', //SIM物联网卡
				camera_station: '暂无数据', //摄像头施工计划
				racord_station: '暂无数据', //巡检仪施工计划
				cn2: '暂无数据', //巡检仪编号，
				record_state: '暂无数据', //巡检仪状态
				racord_update: '暂无数据', //巡检仪更新时间
				camera_update: '暂无数据', //摄像头更新时间
				hc2calat: '暂无数据', //巡检仪纬度
				hc2calon: '暂无数据', //巡检仪经度
				userId: undefined
			}
		};
	},
	onLoad(option) {
		this.heightVal = uni.getSystemInfoSync().windowHeight;
	},
	onShow() {
		this.statusHeight = uni.getStorageSync('systemHeight');
		this.getDevices();
	},
	methods: {
		//请求设备列表
		getDevices() {
			let obj = {
				// phone: 13337211791  //彭爽
				phone: 18182105338 //向巧丽
				// phone: 19918730688 //摄像头
				// phone: 15307475558 //巡检仪
			};
			getDeviceDetails(obj).then((res) => {
				console.log(111, res);
				uni.setStorageSync('userInfo', {
					userid: res.data[0].userid + '',
					phone: obj.phone + '',
					device_id: res.data[0].device_id + '', //安全帽id
					cn1: res.data[0].cn1 + '', //摄像头id
					cn2: res.data[0].cn2 + '' //巡检仪id
				});
				this.detailData = res.data[0];
			});
		},

		//余额不足弹窗
		showTips() {
			uni.showModal({
				title: '提示',
				showCancel: false,
				content: '您的设备距离到期时间还有7天，未及时续费，设备将暂停使用。请联系管理员（18073971822）或设备管理员进行处理，续费费用为750/年。',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},

		//跳转详情页
		toDetail(type) {
			if (type == 0) {
				uni.navigateTo({
					url: `./detail/detail`
				});
				// uni.navigateTo({
				// 	url: '/pages/testVideo/testVideo'
				// });
			} else {
				uni.navigateTo({
					url: `./patrol/patrol`
				});
			}
		},

		//断点续传
		backShow(num) {
			//摄像头
			let obj = {
				notifyType: 0 + '',
				deviceId: undefined,
				notifyUrl: '',
				startTime: formatTime(Date.now() - 86400000),
				endTime: formatTime(Date.now())
			};

			if (num == 0) {
				obj.deviceId = this.detailData.cn1;
				// console.log(obj);
				getBreakCon(obj).then((res) => {
					console.log(888, res);
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				});
			} else {
				//巡检仪
				obj.deviceId = this.detailData.cn2;
				getBreakCon(obj).then((res) => {
					console.log(888, res);
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.task-con {
	padding: 1px;
	background: #f4f4f4;
	font-size: 28rpx;

	.white-block {
		margin: 30rpx 30rpx;
		border-radius: 10px;
		background: white;
		// border: 1px solid rgb(199, 226, 255);
		padding: 16px;
		color: rgba(0, 0, 0, 0.65);

		.title {
			font-size: 36rpx;
			font-weight: bold;
			line-height: 1.5;
			display: inline-block;
			color: rgba(0, 0, 0, 0.65);
			width: 300rpx;
		}
		.tl-right {
			text-align: right;
		}

		.redTxt {
			font-size: 26rpx;
			color: red;
			margin-left: 8rpx;
			text-decoration: underline;
			// white-space: nowrap;
		}

		.btnBox {
			width: 280rpx;
			height: 60rpx;
			padding: 0;
			margin: 0;
			display: flex;
			justify-content: space-between;

			.leftbtn {
				font-size: 26rpx;
				width: 140rpx;
				height: 60rpx;
				margin-right: 0;
				border-radius: 12rpx;
			}
			.rightbtn {
				font-size: 26rpx;
				width: 140rpx;
				height: 60rpx;
				margin-right: 0;
				border-radius: 12rpx;
			}
		}
		.mt-10 {
			margin-top: 10px;
		}
	}
}
.btline {
	border-top: 1px solid #f4f4f4;
	padding-top: 10px;
}
.cplan {
	color: rgb(24, 144, 255);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
